---
dirname: UIComponents
pagename: UIComponentsTypography
layout: Dashboard/Dashboard.layout
---
<article class="Page UIComponentsTypography" id="UIComponentsTypography">
  <div class="PageContainer">

    <header class="PageHeader">
      <h1 class="PageTitle">
        Typography
      </h1>
    </header>

               {{!-- Section 1 Start --}}

    <div class="row Section-1">

      <div class="col-md-4 -sameheight">
        <div class="Card">

          <div class="CardHeader">
            <div class="HeaderBlock">
              <h6 class="Title">Headings</h6>
            </div>
          </div>
          <div class="CardBlock">
            <h1>Heading 1
                <small>Sub-heading</small>
            </h1>
            <h2>Heading 2
                <small>Sub-heading</small>
            </h2>
            <h3>Heading 3
                <small>Sub-heading</small>
            </h3>
            <h4>Heading 4
                <small>Sub-heading</small>
            </h4>
            <h5>Heading 5
                <small>Sub-heading</small>
            </h5>
            <h6>Heading 6
                <small>Sub-heading</small>
            </h6>
          </div>

        </div>
      </div>

      <div class="col-md-4 -sameheight">
        <div class="Card">

          <div class="CardHeader">
            <div class="HeaderBlock">
              <h6 class="Title">Paragraphs</h6>
            </div>
          </div>
          <div class="CardBlock">
            <p class="lead">This is an example of lead body copy.</p> {{!-- need styling --}}
						<p>This is an example of standard paragraph text. This is an example of <a href="javascript:void(0);">link anchor text</a> within body copy.</p>
						<p>
						  <small>This is an example of small, fine print text.</small>
						</p>
						<p>
						  <strong>This is an example of strong, bold text.</strong>
						</p>
						<p>
						  <em>This is an example of emphasized, italic text.</em>
						</p>
          </div>

        </div>
      </div>

      <div class="col-md-4 -sameheight">
        <div class="Card">

          <div class="CardHeader">
            <div class="HeaderBlock">
              <h6 class="Title">Emphasis Classes</h6>
            </div>
          </div>
          <div class="CardBlock"> {{!-- need styling --}}
            <p class="text-muted">This is an example of muted text.</p>
            <p class="text-primary">This is an example of primary text.</p>
            <p class="text-success">This is an example of success text.</p>
            <p class="text-info">This is an example of info text.</p>
            <p class="text-warning">This is an example of warning text.</p>
            <p class="text-danger">This is an example of danger text.</p>
          </div>

        </div>
      </div>

    </div>

               {{!-- Section 1 End --}}

               {{!-- Section 2 Start --}}

    <div class="row Section-2">

      <div class="col-md-4 -sameheight">
        <div class="Card">

          <div class="CardHeader">
            <div class="HeaderBlock">
              <h6 class="Title">Abbreviations</h6>
            </div>
          </div>
          <div class="CardBlock">
            <p>The abbreviation of the word attribute is
                <abbr title="attribute">attr</abbr>.</p>
            <p>
                <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>is an abbreviation for a programming language.</p>
            <br>
            <h4>Addresses</h4>
            <address>
                <strong>Twitter, Inc.</strong>
                <br>795 Folsom Ave, Suite 600
                <br>San Francisco, CA 94107
                <br>
                <abbr title="Phone">P:</abbr>(123) 456-7890</address>
            <address>
                <strong>Full Name</strong>
                <br><a href="mailto:#">first.last@example.com</a>
            </address>
          </div>

        </div>
      </div>

      <div class="col-md-4 -sameheight">
        <div class="Card">

          <div class="CardHeader">
            <div class="HeaderBlock">
              <h6 class="Title">Blockquotes</h6>
            </div>
          </div>
          <div class="CardBlock">
            <h4>Default Blockquote</h4>
            <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </blockquote>
            <h4>Blockquote with Citation</h4>
            <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <small>Someone famous in
                  <cite title="Source Title">Source Title</cite>
                </small>
            </blockquote>
            <h4>Right Aligned Blockquote</h4>
            <blockquote class="pull-right">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </blockquote>
          </div>

        </div>
      </div>

      <div class="col-md-4 -sameheight">
        <div class="Card">

          <div class="CardHeader">
            <div class="HeaderBlock">
              <h6 class="Title">Lists</h6>
            </div>
          </div>
          <div class="CardBlock">
            <h4>Unordered List</h4>
            <ul>
                <li>List Item</li>
                <li>List Item</li>
                <li>
                  <ul>
                      <li>List Item</li>
                      <li>List Item</li>
                      <li>List Item</li>
                  </ul>
                </li>
                <li>List Item</li>
            </ul>
            <h4>Ordered List</h4>
            <ol>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
            </ol>
          </div>

        </div>
      </div>

    </div>

               {{!-- Section 2 End --}}

  </div>
</article>
